<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/demo/demo.css"></link>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
	
<style type="text/css">
	a:link,a:visited{
 		text-decoration:none;  /*超链接无下划线*/
	}
	a:hover{
 		text-decoration:none;  /*鼠标放上去有下划线*/
	}
</style>

	<script type="text/javascript">
	 /*<![CDATA[*/ 
	function showFoodList()
	{
		$.get("/foodList", function(data){
				$("#table").datagrid("loadData", data);
			});
	}
	 function clickQuery()
	 {
		 var tmp = encodeURIComponent($('#foodname').val());
		  var name = $.trim(tmp);  
		  if(name.length==0)
		  {
			  showFoodList();
			  return;
		  }
		  var url = "getFoodByLike?foodname="+name;
		  $('#table').datagrid('loading');
		  $.get(url, function(data){
			  	$("#table").datagrid("loadData", data);
			  	$('#table').datagrid('loaded');
				
			});
	 }
	
	 $(document).ready(  
			  function(){
				  
				  $('#foodname').textbox('textbox').blur(function (){
					  $("#foodname").textbox("setValue", "");
				  });
				  
				  
				  $('#foodname').textbox('textbox').keydown(function (e) {
					  if (e.keyCode == 13) {
						  clickQuery();
				      }
				  });
				  
				  showFoodList();
				  
				  
				  $('#tip').tooltip({
						position: 'bottom',
						content: '<span style="color:#fff">单击修改价格</span>',
						onShow: function(){
							$(this).tooltip('tip').css({
								backgroundColor: '#666',
								borderColor: '#666'
							});
						}
					});
				  
				 
					   
			  });
	 
	    function deleteFood(val)
	    {
	    	$.messager.defaults= { ok: "确定",cancel: "取消" };
	    	 
	    	$.messager.confirm("操作提示","您确定要执行操作吗？",
	    		function (data)
	    	 	{
	    	            if (data)
	    	 			{
	    	            	var url = "delete_food?id="+val;
	    			    	$.get(url, function(data){
	    			    			showFoodList();
	    					});
	    	            }
	    	            
	    	     });
	
	    }
	    function addPanel(foodname,url)
	    {
	    	self.parent.addPanel(foodname,url);
	    }
	    
	 	function formatColumn(val,row){
	 		var surl ="show_fooddetail?id="+val;
			return '<a href="#" onclick="addPanel(\''+row.foodname+'\',\''+surl+'\')">查看</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"  onclick="deleteFood(\''+val+'\')">删除</a>'
			
		}
	 	
	 	function endedit()
	 	{
	 		var row = $('#table').datagrid('getSelected');
	 		var index = $('#table').datagrid('getRowIndex',row);
			$('#table').datagrid('endEdit', index);
	 	}
	 	
	 	function onClickRow(index,field){
	 	
		 		$('#table').datagrid('selectRow', index)
				.datagrid('beginEdit', index);
	 	}
	 	
	 	function afterEdit(rowIndex,rowData,changes)
	 	{
	 		var url = "udpatefood?id="+rowData.id+"&price="+rowData.price;
	 		
	 		$.get(url, function(data){
	    			showFoodList();
			});
	    	
	 	}
	 	
	 	function cellclick2(index, field){
	        if(field=='price')
	        {
	      		$('#table')
					.datagrid('beginEdit', index);
	        }else
	        {
	       	 $('#table')
					.datagrid('endEdit', index);
	        }
	   }
	 	
	 	function updlg()
	 	{
	 		$('#updlg').dialog('open');
	 		$("#file").textbox("setValue", "");
	 	}
	 	
	 	function upexel()
	 	{
	 		
	 		$("#fileform").submit();
	 		
	 		$('#updlg').dialog('close');
	 		
	 			
	 		
	 	}
	 	
	 	
	 	function reload()
	 	{
	 		 window.location.reload();
	 	}
	 	
	 	/*]]>*/  
	</script>
	
	
</head>
<body>

<div  id="tip" style="position:absolute;left:0px;top:0px;width:510px;height:90%;">
<table id="table" class="easyui-datagrid" title="菜单列表" style="width:500px;height:100%;"
			data-options="singleSelect:true,collapsible:false,rownumbers: true,onClickCell:cellclick2,onAfterEdit:afterEdit,toolbar:'#tt'">
		<thead>
			<tr>
				<th data-options="field:'foodname'" width="25%">菜名</th>
				<th data-options="field:'price',editor:'text'" width="25%">价格</th>
				<th data-options="field:'id',align:'center',formatter:formatColumn" width="50%">操作</th>

			</tr>
		</thead>
	</table>
	</div>
	
	<div id="tt" style="padding:2px 5px;">
		<input class="easyui-textbox" data-options="prompt:'按回车查询'" name ="foodname"  id="foodname" style="width:100px"/>
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="updlg()">导入菜品</a>
	</div>
	
	<div id="updlg" class="easyui-dialog"  title="批量导入菜品" style="width:200px;height:85px;padding:5px;"
			data-options="
				iconCls: 'icon-save',
				modal:true,
				closed:true
			">
		<form id="fileform" method="POST" enctype="multipart/form-data"  action="/exelupload" target="ajaxUpload" style="margin:0px"> 
		
				<input class="easyui-filebox" id="file" name="file" style="width:170px;height:35px;" data-options="onChange:upexel,prompt:'选择文件',buttonText:'&nbsp;上&nbsp;传&nbsp;'"/>
		
		</form>
	</div>
	
	
	<!-- tips控件需要 -->
	<div></div>
	
	<iframe name="ajaxUpload" style="display:none;"></iframe>
</body>
</html>